﻿@{
    Layout = "_Layout";
    ViewData["Title"] = "周报";
}
<avue-crud :data="tableData" :option="option" :permission="hasPermission" :page.sync="pageOption" :table-loading="loading"
           v-on:refresh-change="refreshChange"
           v-on:row-save="RowSave"
           v-on:row-update="handleRowUpdate"
           v-on:row-del="handleRowDel"
           v-on:search-change="searchChange"
           v-on:search-reset="resetChange"
           :cell-style="cellStyle"
           v-on:on-load="onLoad">
</avue-crud>
@section Scripts {
    <script>
        new Vue({
            el: '#app',
            mixins: [curdMixin],
            data() {
                return {
                    name: "weekly",
                    pageUrl: "/weekly/pages",
                    addUrl: "/weekly/submit",
                    editUrl: "/weekly/submit",
                    deleteUrl: "/weekly/delete",
                    extionData: {
                        week: null
                    },
                    option: {
                        searchShowBtn: Permissions.avePermission(`weekly:searchBtn`),
                        refreshBtn: Permissions.avePermission(`weekly:searchBtn`),
                        searchMenuSpan: 8,
                        rowKey: 'id',
                        delBtn:false,
                        gridBtn:true,
                        column: [
                            { prop: "id", label: `${this.i18n.t('primary_key')}`, search: false, hide: true, type: "number", display: false, showColumn: false, },
                            { prop: "year", label: `年份`, search: false, hide: false, display: false, type: "number", clearable: true, showColumn: false,width:75, },
                            { prop: "month", label: `月份`, search: false, hide: false, display: false, type: "number", clearable: true, showColumn: false,width:75, },

                            { prop: "week", label: `周2`, search: false, hide: false, display: false, type: "week", clearable: true, showColumn: false,width:75, },
                            { prop: "day", label: `周`, search: false, hide: true, type: "week", clearable: true, showColumn: false,  format: "第 WW 周",change:({column,value})=>{
                                if (value) {
                                   const date = new Date(value);
                                   const weekNumber = this.getWeekNumber(date);
                                   this.extionData.week=weekNumber;
                                 }
                                }, 
                                rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }],
                            },
                            { prop: "content", label: `内容`, search: false, hide: false, type: "textarea", clearable: true, span: 24,overHidden:true, rows: 2, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], showColumn: false, },
                            { prop: "planContent", label: `计划内容`, search: false, hide: false, type: "textarea", clearable: true, span: 24,overHidden:true, rows: 2, showColumn: false,},
                        ]
                    },
                }
            },
            created() {
            },
            methods: {
                cellStyle({ row, column, rowIndex, columnIndex }) {
                    if (columnIndex == 3) {
                        if (row.isDisable == 0) {
                            return { color: '#409eff', }
                        }
                        else {
                            return { color: '#f56c6c', }
                        }
                    }
                },
                getWeekNumber(date) {
                    const year = date.getFullYear();
                    const month = date.getMonth() + 1;
                    const day = date.getDate();
                    const firstDayOfYear = new Date(year, 0, 1);
                    const pastDaysOfYear = (new Date(year, month - 1, day) - firstDayOfYear) / 86400000 + 1;
                    return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() - 1) / 7);
                },
                RowSave(form, done, loading){
                    const date = new Date(form.day);
                    const weekNumber = this.getWeekNumber(date);
                    form.week=weekNumber;
                    this.handleRowSave(form, done, loading);
                },
                handleWeekChange(value) {
                 if (value) {
                   const date = new Date(value);
                   const weekNumber = this.getWeekNumber(date);
                   console.log(`第${weekNumber}周`);
                 }
                }
            }
        });
    </script>
}